<template>
  <div class="search">
    <Row>
      <Col>
        <Card>
            <p slot="title">
                表格-合并列
            </p>
          <Row>
            <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom"></Table>
            <Table :loading="loading" border :columns="columns2" :data="data2" ref="table" sortable="custom"></Table>
          </Row>
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script>
import circleLoading from "@/views/my-components/circle-loading.vue";
export default {
  name: "table-colspan",
  components: {
    circleLoading,
  },
  data() {
    function addrows(h,params){
      let colspan=params.row.colspan;
        if(colspan=="8"){
            return h("div", 
            {
                attrs:{
                    colspan:'8'
                }
            },
            params.row.week
          );
        }
    };  
    return {
      loading: true, // 表单加载状态
      columns2: [
        {
          title:'下午',
          align: 'center',
          children:[
            {
              title:"",
              key: "index2",
              minWidth: 120,
              render:(h,prrams)=>{
                return h(
                        "div",
                        {
                            style: {
                                display:"none"
                            },
                        },
                    )
              }
            },
            {
              title:"",
              key: "week1",
              minWidth: 120,
            },
            {
              title:"",
              key: "week2",
              minWidth: 120,
            },
            {
              title:"",
              key: "week3",
              minWidth: 120,
            },
            {
              title:"",
              key: "week4",
              minWidth: 120,
            },
            {
              title:"",
              key: "week5",
              minWidth: 120,
            },
            {
              title:"",
              key: "week6",
              minWidth: 120,
            },
            {
              title:"",
              key: "week7",
              minWidth: 120,
            },
          ]
        }
        
      ],
      columns: [
        {
          title:'上午',
          align: 'center',
          children:[
            {
              title:"序号",
              key: "index",
              minWidth: 120,
            },
            {
              title:"星期一",
              key: "week1",
              minWidth: 120,
            },
            {
              title:"星期二",
              key: "week2",
              minWidth: 120,
            },
            {
              title:"星期三",
              key: "week3",
              minWidth: 120,
            },
            {
              title:"星期四",
              key: "week4",
              minWidth: 120,
            },
            {
              title:"星期五",
              key: "week5",
              minWidth: 120,
            },
            {
              title:"星期六",
              key: "week6",
              minWidth: 120,
            },
            {
              title:"星期日",
              key: "week7",
              minWidth: 120,
            },
          ]
        }
        
      ],
      data: [], // 表单数据
      data2: [], // 表单数据
    };
  },
  methods: {
    init() {
      this.getDataList();
    },
    getDataList() {
      this.loading = true;
      this.data=[
        {
          "index":"1",
          "week1":"语文",
          "week2":"有机化学",
          "week3":"数学",
          "week4":"物理",
          "week5":"物理化学",
          "week6":"无机化学",
          
        },
        {
          "index":"2",
          "week1":"语文",
          "week2":"有机化学",
          "week3":"数学",
          "week4":"物理",
          "week5":"物理化学",
          "week6":"无机化学",
          "week7":"",
        },
        {
          "index":"3",
          "week1":"语文",
          "week2":"有机化学",
          "week3":"数学",
          "week4":"物理",
          "week5":"物理化学",
          "week6":"无机化学",
          "week7":"",
        },
        {
          "index":"4",
          "week1":"语文",
          "week2":"有机化学",
          "week3":"数学",
          "week4":"物理",
          "week5":"物理化学",
          "week6":"无机化学",
          "week7":"",
        },
      ];
      this.data2=[
        {
          "index2":"5",
          "week1":"语文",
          "week2":"有机化学",
          "week3":"数学",
          "week4":"物理",
          "week5":"物理化学",
          "week6":"无机化学",
          
        },
        {
          "index2":"6",
          "week1":"语文",
          "week2":"有机化学",
          "week3":"数学",
          "week4":"物理",
          "week5":"物理化学",
          "week6":"无机化学",
          "week7":"",
        },
      ];
      this.loading = false;
    },
  },
  mounted() {
    this.init();
  }
};
</script>
<style lang="less">
.rowspan__parent{
    margin: 0 -20px;
}
.rowspan__child{
    padding: 10px 20px;
}
.rowspan__child--border{
    border-bottom:1px solid #E8EAEC;
}

</style>